
$buttonWidth: 70px;
// main css
body,
table,
tr,
td,
div {
  padding: 0;
  margin: 0;
}
body {
	background-image: url(../images/first-page.jpg);
	background-repeat: no-repeat;
	background-size: 100% auto;
	.button {
		font-size: 20px;
		font-family: 'Arial Rounded MT';
		height: 36px;
		width: 120px;
		border-radius: 15px;
		background-color: rgba(128, 128, 128, 0.2);
	}
}
.hidden {
    display: none;
}

//login-register css

#top-navbar {
    height:40px;
    width: 100%;
	position:fixed;
	top:0;
	left:0;
	z-index: 2;
	margin-bottom:10px;
    background-color:burlywood;
	span {
			font-size: 20px;
			font-family: 'Arial Rounded MT';
			height: 36px;
			line-height: 40px;
			vertical-align:middle;
			padding-left: 15px;
		}
	}

.login-register-container {
    width: 150px;
    padding: 10px;
	margin-top:40px;
    background-color: rgba(168, 168, 168, 0.7);
    border: 2px solid rgba(208, 208, 208, 0.8);
    border-radius: 5px;
}
.login-register-container input{
    margin:5px 0 5px 0;
}
.login-register-container button{
    width: 70px;
    font-size: 14px;
    font-family: 'Arial Rounded MT';
    margin-top:5px;
    position:relative;
    left: 50%;
}

// Listview container css
.control-container{
	background-color: rgba(168, 168, 168, 0.7);
    border: 2px solid rgba(208, 208, 208, 0.8);
	border-radius: 15px;
	display:inline-block;

	h3{
		margin: 15px 25px;
	}
	ul{
		margin: 0 15px 0 0;
		padding: 0 0 15px 50px;
		list-style-type:none;
		li{
			padding:2px;
		}
	}
	table{
		margin: 0 15px;
		tbody tr td, thead tr th{
		pading: 5px;
		}
	}
}


//messages container css
#messages-list{
	margin: 10px auto 0 auto;
	padding: 0 10px 10px 10px;
	display:block;
	width:600px;
	ul{
	height: 110px;
		margin: 0 40px 0 0;
		overflow-y:auto;
		li{
			border: 1px solid rgba(208, 208, 208, 0.8);
			border-radius: 5px;
			padding:3px 15px;
			margin: 3px;
		}
		:nth-child(2n){
			background-color: #01C4CA;
		}
		:nth-child(2n + 1){
			background-color: #01D304;
		}
	}
}

#scores-gridview{
	margin-top:40px;
	position: absolute;
	left:80%;
	background-color: rgb(168, 168, 168);
	padding: 10px 10px 30px 10px;
	display:inline-block;
	min-height: 140px;
	h2{
		margin: 15px 25px;
		text-align:center;
	}
	table{
		margin: 0 auto;
	}
}

#open-games-list{
	position: absolute;
	top: 50px;
	left: 5px;
	width:300px;
	min-height:400px;
	ul li{
		font-size:18px;
		font-weight:bold;
		padding:6px;
	}
}

#active-games-list{
	position: absolute;
	top: 50px;
	left: 1040px;
	width:300px;
	min-height:400px;
	ul li{
		font-size:18px;
		font-weight:bold;
		padding:6px;
	}
}

#create-game-container{
	margin: 50px auto 0 auto;
	padding: 0 10px 10px 10px;
	display:block;
	width:600px;
	input{
		width:90px;
	border-radius: 5px;
	margin: 0 10px 0 5px;
	}
}

#game-state-gridview{
	margin: 10px auto 0 auto;
	padding: 0 10px 10px 10px;
	display:block;
	width:600px;
	min-height: 140px;
	h2{
		margin: 15px 25px;
		text-align:center;
	}
	table{
		margin: 0 auto;
		border-collapse:collapse;
		tr td{
			width: 100px;
			height: 100px;
			border: 1px solid black;			
			span{				
				background-repeat: no-repeat;
				background-size: 100% auto;
				height:100%;
				display:block;
				text-align: right;
				vertical-align:top;
				font-size: 12px;
				padding-right:3px;
				color: black;
				text-shadow:
				-1px -1px 0 #fff,
				1px -1px 0 #fff,
				-1px 1px 0 #fff,
				1px 1px 0 #fff;
			}
		}
	}
}

#selected-div{
	width:50px;
	height:50px;
    background-color: rgba(176, 216, 10, 0.5);
	display: none;
}